import { constantRoutes } from '@/router'
import { transListToTreeData } from '@/utils/index'

export default {
  namespaced: true,
  state: {
    // 作用：提供给侧边栏渲染使用，初始值是静态路由，最终是静态 + 用户动态路由
    routes: constantRoutes
  },
  mutations: {
    setRoutes(state, data) {
      // data就是用户动态路由
      state.routes = [...constantRoutes, ...data]
    }
  },
  actions: {
    // data就是传入的用户路由配置(服务器端返回的)
    generateRoutes({ commit }, data) {
      const name = ['auth', 'house', 'owners', 'parking', 'service', 'expenses', 'device', 'content']
      // data.forEach(item => {
      //   if (item.path === '/community') {
      //     item.path = '/community/community'
      //   }
      //   if (item.path === '/ticket') {
      //     item.path = '/ticket/index'
      //   }
      //   return item
      // })

      // if (comStr === '/community') {
      //   return require('@/views' + comStr + '/community.vue').default
      // }
      // if (comStr === '/ticket') {
      //   return require('@/views' + comStr + '/index.vue').default
      // }
      // 加载视图方法
      const loadView = (comStr) => {
        try {
          if (name.includes(comStr.slice(1))) {
            // src目录
            return require('@/layout/index.vue').default
          }
          if (comStr === '/community') {
            return require('@/views' + comStr + '/community.vue').default
          }
          if (comStr === '/ticket') {
            return require('@/views' + comStr + '/index.vue').default
          } else {
            // views目录
            return require('@/views' + comStr + '.vue').default
          }
          // console.log(require('@/views' + comStr + '.vue').default)
        } catch (error) {
          // console.log(error)
          // 加载组件出错
          return require('@/views/error.vue').default
        }
      }

      // 1.处理component变成项目所需要的路由配置结构
      // { path, name, redirect, component, meta:{title, icon}, hidden, children }
      console.log(data)
      const newArr = data.map(item => {
        if (item.name === 'community') {
          return {
            path: '/community',
            name: 'community',
            component: () => import('@/layout/index.vue'),
            meta: { title: '小区管理', icon: 'dashboard' },
            children: [
              {
                path: 'community',
                name: 'community',
                component: () => import('@/views/community/community'),
                meta: { title: '小区管理', icon: 'dashboard' }
              }
            ],
            id: item.id,
            pid: item.pid
          }
        }
        if (item.name === 'ticket') {
          return {
            path: '/ticket',
            name: 'ticket',
            component: () => import('@/layout/index.vue'),
            meta: { title: '投票管理', icon: 'dashboard' },
            children: [
              {
                path: 'ticket',
                name: 'ticket',
                component: () => import('@/views/ticket/index'),
                meta: { title: '投票管理', icon: 'dashboard' }
              }
            ],
            id: item.id,
            pid: item.pid
          }
        } else {
          return {
            path: item.path,
            name: item.name,
            hidden: item.status !== 1,
            meta: {
              title: item.title,
              icon: item.icon
            },
            // redirect: item.path.substr(1),
            component: loadView(item.path),
            id: item.id,
            pid: item.pid
          }
        }
      })
      console.log(data)
      console.log(newArr)
      // 2.整理成树形结构
      const userAsyncRoutes = transListToTreeData(newArr, 0)
      // const userAsyncRoutes = newArr
      // 3.设置给侧边栏
      commit('setRoutes', userAsyncRoutes)
      // 4.返回用户动态路由配置
      console.log(userAsyncRoutes)
      return userAsyncRoutes
    }
  }
}
